<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银链食安</title>
    <link rel="stylesheet" href="bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        .top {
            position: relative;
        }
        .top-title-wrap {
            color: #fff;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
        }
        .top-title-wrap .top-title {
            font-size: 60px;
            font-weight: 600;
            margin-bottom: 30px;
        }
        .top-title-wrap .top-sub-title {
            font-size: 18px;
        }


        .more {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 7rem;
            height: 2.6rem;
            background: linear-gradient(147deg, #336CFF 0%, #1778FF 100%);
            border-radius: 4px;
            font-size: 16px;
            margin-top: 8rem;
            cursor: pointer;
        }
        .more:hover {
            /*添加阴影*/
            /*添加动画*/
            box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.1);
        }

        .head_top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            transform: translateY(-50%);
            margin: 0 auto;
            z-index: 99;
            position: absolute;
            width: 100%;
        }

        .head_box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 19.2rem;
            padding: 24px 40px;
            /* width: 20rem; */
            background: linear-gradient(180deg, rgba(230, 240, 255, 0.9) 0%, #FFFFFF 100%);
            border-radius: .4rem;
            box-shadow: 0 .1rem 1.4rem 0 rgba(0, 65, 166, 0.2);
            background-color: #fff;
        }

        .head_box_t {
            height: 50%;
            display: flex;
            align-items: center;
        }

        .head_box_b {
            height: 50%;
            display: flex;
            align-items: center;
            color: #8C99AE;
        }

        .linkage {
            display: flex;
            align-items: end;
            justify-content: center;
            position: relative;
            width: 100%;
            height: 29.75rem;
            background: url(static/index/bg5.png);
            background-size: 100% 100%;
        }

        .linkage_txt2 {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1.8rem;
            font-weight: 700;
        }

        .linkage_b {
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 15rem;
        }

        .linkage_box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 15rem;
            height: 15rem;
            transition: all 0.3s;/* 变化过程需要的时间 */

        }
        .linkage_box:hover{
            background: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 .6rem 3rem 0 rgba(7, 16, 80, 0.2);
        }

        .linkage_txt {
            margin-top: .9rem;
            color: #666666;
        }

        /* .active {
            background: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 .6rem 3rem 0 rgba(7, 16, 80, 0.08);
        } */

        .solve {
        }

        .solve_t {
            width: 100%;
            height: 5rem;
            background: #ffffff;
            margin-top: 6rem;
        }

        .solve_txt {
            font-size: .6rem;
            color: #9E9E9E;
            letter-spacing: 3px;
        }

        .solve_b {
            width: 100%;
            height: 20rem;
            margin-top: 4rem;
        }

        .solve_box {
            position: relative;
            width: 13.8rem;
            height: 20rem;
            border-radius: 1rem;
            overflow: hidden;
        }

        .solve_box>img {
            width: 100%;
            height: 100%;
            transition: 0.5s;
        }
        .solve_box:hover .bg {
            transform: scale(1.25);
        }

        .solve_mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 1rem;
            background: linear-gradient(0deg, #000C21 2%, rgba(0, 12, 33, 0.2) 100%);
            z-index: 10;
            transition: .3s;
        }

        .solve_content {
            color: #ffffff;
            padding-left: 2rem;
            padding-right: 2rem;
            position: absolute;
            bottom: 0;
            transform: translateY(0);
            transition: .5s;
        }
        .solve_mask-icon {
            margin-bottom: 1.25rem;
            opacity: 0;
            height: 0;
            transition: .3s;
        }
        .solve_mask-desc {
            font-size: 14px;
            opacity: 0;
            height: 0;
            transition: .3s;
        }
        .mask_txt {
           margin-bottom: 1.5rem;

        }
        .solve_mask:hover {
            background: linear-gradient(0, #000C21 2%, rgba(0,12,33,0.5) 100%);
        }
        .solve_mask:hover .solve_content {
            transform: translateY(-6.25rem);
        }
        .solve_mask:hover .solve_mask-icon {
            height: auto;
            opacity: 1;
        }
        .solve_mask:hover .solve_mask-desc {
            opacity: 1;
            height: auto;
        }


        .handle_b {
            position: relative;
            width: 100%;
            margin-top: 2rem;
        }

        .backgrounds {
            position: absolute;
            bottom: -5rem;
            left: 0;
            width: 100%;
            height: 527px;
            background: url(static/index/bg4.png);
            background-size: 100% 100%;
            z-index: 1;
        }

        .handle_b_box {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding-bottom: 30px;
        }

        .handle_terminal {
            width: 16.45rem;
            background: linear-gradient(180deg, rgba(230, 240, 255, 0.9) 0%, #FFFFFF 100%);
            box-shadow: 0 1rem 2rem 0  rgba(120, 123, 129, 0.3), inset 0 .1rem 0 0 #FFFFFF;
            border-radius: .8rem;
            padding-bottom: 1.5rem;
            z-index: 2;
            transition: all 0.3s;/*变化过程需要的时间 */
        }
        .handle_terminal:hover{
            box-shadow: 0 0.5rem 1rem 0 rgba(0, 65, 166, 0.3), inset 0 .1rem 0 0 #FFFFFF;
            transform: scale(1.04);/*放大多少倍 */
        }

        .handle_terminal_t {
            width: 50%;
            height: 10.5rem;
            margin-left: 3.25rem;
            font-weight: 600;
        }

        .handle_terminal_t>img {
            width: 2.5rem;
            height: 2.5rem;
            margin: 3rem 0 1.4rem 0;
        }

        .dates {
            margin-left: 3.25rem;
            margin-bottom: 1.5rem;
        }

        .dates>img {
            width: 1rem;
            height: 1rem;
            margin-right: .6rem;
        }

        .polymerization {
            position: relative;
            width: 100%;
            height: 44.5rem;
            background: #f6f8fa;
            margin-top: 5rem;
        }

        .polymerization_img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(static/index/bg7.png);
            background-size: 100% 100%;
            z-index: 1;
        }

        .mt_tops {
            margin-top: 4rem;
        }

        .polymerization_b {
            z-index: 2;
            margin-top: 80px;
        }

        .polymerization_l {
            width: 606px
        }

        .polymerization_l>img {
            width: 100%;
            height: 100%;
        }

        .polymerization_r {
            width: 416px
        }

        .introduce_t {
            /* margin: .5rem 0; */
        }

        .introduce_b {
            margin-top: .9rem;
        }

        .introduce_b_box {
            margin: .5rem 0;
        }

        .content {
            display: flex;
            align-items: center;
        }

        .content>img {
            width: .8rem;
            height: .8rem;
            margin-right: .5rem;
        }

        .content_b {
            margin-left: 1.25rem;
            line-height: 26px;
        }

        .select {
            width: 100%;
            background: #ffffff;
            padding-bottom: 1.5rem;
        }

        .select_me {
            margin-top: 60px;
        }

        .select_box {
            position: relative;
            width: 18rem;
            height: 25.9rem;
            background: #FFFFFF;
            border-radius: 1rem;
            box-shadow: 0 0 .25rem 0 rgba(96, 103, 113, 0.2);
            transition: all 0.3s;/*变化过程需要的时间 */
            overflow: hidden;
            padding-bottom: 4.7rem;
        }
        .select_box:hover{
            transform: translateY(-20px);
            box-shadow: .1rem .2rem 0.8rem .2rem rgba(96, 103, 113, 0.2);
        }

        .select_box_t {
            margin-bottom: 1rem;
        }

        .select_box_t>img {
            width: 4rem;
            height: 4rem;
            margin: 2rem 0 1rem 0;
        }

        .select_box_c {
            margin-left: 2rem;
            color: #666666;

        }

        .select_box_c_txt>img {
            width: .6rem;
            height: .6rem;
        }

        .select_box_b {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4.7rem;
            background: url(static/index/bg6.png);
            background-size: 100% 100%;
            color: #ffffff;
        }


        .product {
            width: 60%;
            margin: 0 auto;
            position: relative;
            /* background: linear-gradient(242deg, rgba(82, 145, 255,.13) 60%, rgba(53, 255, 248,.13) 100%); */
        }
        .product-nav-wrap {
            width: 70%;
            margin-top: 100px;
        }
        .product-nav-list {

        }
        .product-nav-list .product-nav {
            font-size: 28px;
            font-weight: 500;
            color: #757981;
        }
        .product-nav-list .product-nav.active {
            color: #191F2D;
            font-size: 32px;
            border-bottom: 4px solid #326BFF;
        }
        #carouselExample {
            background: linear-gradient(180deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.6) 100%);
            box-shadow: 0px 10px 60px 0px rgba(0,0,0,0.05);
            border-radius: 20px;
            padding-top: 60px;
            padding-left: 60px;
            padding-bottom: 100px;
            width: 100%;
            margin-top: 30px;
            min-height: 540px;
        }
        .product-content {

        }
        .product-content-section {
            font-size: 16px;
            color: #374459;
            margin-bottom: 30px;
            max-width: 600px;

        }
        .product-content-section-title {
            font-size: 28px;
            font-weight: 600;
            color: #191F2D;
            margin-bottom: 10px;
        }
        .product-content-section-title img {
            margin-right: 10px;
        }
        .product .control-btns {
            position: absolute;
            right: 300px;
            bottom: 40px;
        }
         .btn-arrow {
            width: 50px;
            height: 50px;
            background: #DDDDE2;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
         .btn-arrow  .arrow {
            border-color: #333333;
            border-width: 0px 2px 2px 0px;
            padding: 3px;
        }
         .btn-arrow:hover {
            background: linear-gradient(147deg, #336CFF 0%, #1778FF 100%);
        }
        .btn-arrow:hover .arrow {
            border-color: #fff;

        }
        .btn-arrow .arrow-left {
            margin-right: -5px;
        }
        .btn-arrow .arrow-right {
            margin-left: -5px;
        }
        .product .control-btns img {
            width: 50px;
            cursor: pointer;
        }
        .product .control-btns img:nth-child(1) {
            margin-right: 20px;
        }
        .product .phone-model {
            position: absolute;
            right: -280px;
            top: 100px;
            width: 529px;
            overflow: hidden;
            display: flex;

        }
        .product .phone-model .phone-wrap {
            display: flex;
            flex-wrap: nowrap;
            transition: 0.4s;
            transform: translateX(0);
        }
        .product .phone-model img {
            width: 529px;
        }

        /* 合作方案 */
        .cooperation-wrap {
            margin-top: 120px;
        }
        .cooperation {
            width: 100%;
            padding-left: 20%;
            background-image: url(static/index/cooperation-bg.png);
            background-position: right 320px top 100px;
            background-repeat: no-repeat;
            background-size: contain;
        }
        .cooperation-content {
            font-size: 16px;
            font-weight: 500;
            color: #374459;
            position: relative;
            margin-top: 80px;
        }
        .cooperation-content .cooperation-name {
            font-size: 30px;
            font-weight: 500;
            color: #191F2D;
        }
        .cooperation-content .cooperation-name img {
            width: 60px;
            height: 60px;
            margin-right: 20px;
        }
        .cooperation-content .number {
            font-size: 32px;
            font-weight: 700;
            color: #EE4C2F;
        }
        .cooperation-content .unit {
            font-size: 12px;
            font-weight: 500;
            color: #EE4C2F;
        }
        .cooperation-content-desc {
            width: 630px;
            padding-top: 30px;
            padding-bottom: 30px;
        }
        .cooperation-content-desc .desc {
            margin-top: 40px;
            margin-bottom: 40px;
        }
        .cooperation-content-desc .control-btns {
            margin-top: 60px;
            padding-right: 30px;
        }
        .cooperation-content-desc .control-btns img {
            width: 50px;
           cursor: pointer;
        }
        .cooperation-content-desc .control-btns img:nth-child(1) {
             margin-right: 20px;
        }
        .cooperation-content-desc .btn-detail {
            width: 166px;
            height: 50px;
            background: linear-gradient(147deg, #336CFF 0%, #1778FF 100%);
            box-shadow: 0px 8px 16px 0px rgba(50,107,255,0.4);
            border-radius: 25px;
            font-size: 16px;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        .cooperation-content-desc .btn-detail:hover {
            /* 添加阴影*/

        }
        .cooperation-content .img-wrap  {
            position: absolute;
            right: 0;
            top: 0;
        }
        .cooperation-content .img-wrap img  {
            width: 900px;
            height: 500px;

        }




    </style>
    <style>

        /*
        首页修改样式
        */
        @media (max-width: 767.98px) {
            .top {
                height: auto;
                min-height: 180px;
                padding-top: 0px;
            }
            .top-title-wrap {
                padding-top: 20px;
            }
            .top-title-wrap .top-title {
                font-size: 20px;
            }
            .lb_tit {
                top: 10px;
                left: 50%;
            }
            .more {
                width: 70px;
                height: 26px;
                font-size: 12px;
            }
            .head_top {
                width: 96%;
                flex-wrap: wrap;
                height: auto;
                margin-top: 10px;
            }
            .head_box {
                width: 30%;
                padding: 5px 5px 5px 0;
            }
            .linkage {
                height: auto;
            }
            .linkage .linkage_b {
                width: 96%;
                height: auto;
                margin-top: 120px;
            }
              .linkage .linkage_b .linkage_box {
                height: auto;
                width: 22%;
                text-align: center;
            }
            .solve {
                width: 90%;
            }
            .solve .solve_box .mask_txt {
                font-size: 12px;
            }
            .handle_b {
                margin-top: 25px;
            }
            .handle_b_box  {
                width: 96%;
            }
             .handle_b_box .handle_terminal  {
                width: 30%;
            }
            .handle_terminal_t {
                height: auto;
            }
            .handle_terminal_t>img {
            width: 25px;
            height: 25px;
        }
        .polymerization {
            height: auto;
        }
        .polymerization .polymerization_b  {
            flex-direction: column;
        }
        .polymerization_l ,.polymerization_r {
            width: 100%;
            height: auto;
        }
        .polymerization_r .introduce_b_box  img{
            width: 8px;
            height: 8px;
        }
        .select_me {
            width: 90%;
            flex-direction: column;
        }
        .select_me .select_box {
            height: auto;
            width: 100%;
            padding-bottom: 40px;
            margin-top: 35px;
        }
        .select_box_t>img {
            width: 40px;
            height: 40px;
        }
        .select_box_c_txt {
            display: flex;
            height: 35px;
            align-items: center;
        }
        .select_box_c_txt>img {
            width: 6px;
            height: 6px;
        }
        .select_box_b {
            height: 35px;
        }

        .product {
            width: 100%;
        }
        .phone-model {
            display: none;
        }
        .product-nav-list .product-nav {
            font-size: 14px;
        }
        .product-nav-list .product-nav.active {
            font-size: 16px;
        }
        .product-nav-wrap {
            margin-top: 30px;
        }
        #carouselExample {
            padding: 20px;
        }
        .cooperation {
            padding: 0 10px;
        }
        .cooperation-content {
            margin-top:20px;
        }
        .cooperation-content .cooperation-name img {
            width: 30px;
            height: 30px;
        }
        .cooperation-content-desc {
            width: 100%;
            padding-top: 0;
        }
        .cooperation-content-desc .desc {
            margin: 10px 0;
        }
        .cooperation-content .img-wrap {
            display: none;
        }

        .cooperation-content-desc .btn-detail {
            width: 83px;
            height: 25px;
            border-radius: 10px;
            font-size: 12px;
            line-height: 25px;
            cursor: pointer;
        }
        .cooperation-content-desc .control-btns {
            margin-top: 20px;
        }
        .cooperation-content-desc .control-btns img {
            width: 25px;
           cursor: pointer;
        }


            .img36 {
                width: 18px;
                height: 18px;
            }
            .img64 {
                width: 32px;
                height: 32px;
            }
            .f28 {
                font-size: 16px;
            }

    }
    </style>
</head>

<body>

    <header>
        <div class="header-content container-md d-flex  justify-content-between align-items-center">
            <div class="logo-wrap d-flex  align-items-center">
                <img style="margin-right: 10px;" width="40" src="static/head/logo.png" />
                银链食安
            </div>
            <div class="menu-wrap d-flex">
                <div class="menu active">
                    首页
                </div>
                <div class="menu">
                    最新动态
                </div>
                <div class="menu">
                    关于我们
                </div>
            </div>
        </div>


    </header>
    <div class="top">
        <img class="img-fluid" src="static/index/bg.png" alt="">

        <div class="top-title-wrap ">
            <div class="container-md">
                <div class="top-title">
                    城市食品安全监管系统
                </div>
                <div class="top-sub-title">
                    致力于构建食安城市
                </div>
                <div class="more">
                    <span>了解更多 →</span>
                </div>
            </div>

        </div>
        <div class="head_top">
            <div class="container-md d-flex justify-content-between">
                <div class="head_box">
                    <div class="head_box_t">
                        <img class="img36" src="static/index/i_wa3.png" alt="">
                        <span class="f20">食安码</span>
                    </div>
                    <div class="head_box_b">
                        <span class="f16">支付、点餐、评价三码合一</span>
                    </div>
                </div>
                <div class="head_box">
                    <div class="head_box_t">
                        <img class="img36" src="static/index/i_dn.png" alt="">
                        <span class="f20">食安通</span>
                    </div>
                    <div class="head_box_b">
                        <span class="f16">一站式餐饮企业数字管理系统</span>
                    </div>
                </div>
                <div class="head_box">
                    <div class="head_box_t">
                        <img class="img36" src="static/index/i_wa2.png" alt="">
                        <span class="f20">食安保</span>
                    </div>
                    <div class="head_box_b">
                        <span class="f16">全链路城市食品安全监管大脑</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="linkage">
        <div class="linkage_txt2">多端联动助力构建城市餐饮监管系统 </div>
        <div class="linkage_b container-md">
            <div class="linkage_box">
                <img class="img64" src="static/index/i_ms.png" alt="">
                <span class="f20">模式优化</span>
                <span class="f16 linkage_txt">由“人工 监管”向“数据监管”转变</span>
            </div>
            <div class="linkage_box">
                <img class="img64" src="static/index/i_cj.png" alt="">
                <span class="f20">层级优化</span>
                <span class="f16 linkage_txt">单一监管向监管、服务、 融合转变</span>
            </div>
            <div class="linkage_box active">
                <img class="img64" src="static/index/i_dh.png" alt="">
                <span class="f20">明确方向</span>
                <span class="f16 linkage_txt">由“政府监管”向“社会共治”转变
                </span>
            </div>
            <div class="linkage_box">
                <img class="img64" src="static/index/i_aq.png" alt="">
                <span class="f20 ">行业整合</span>
                <span class="f16 linkage_txt">发挥行业自律作用</span>
            </div>
        </div>
    </div>

    <div class="solve container-md">
        <div class="solve_t flex_ZC">
            <span class="f36 fw">我们能解决什么问题</span>
            <span class=" solve_txt">潜心行业十余载，精准触达痛点</span>
        </div>
        <div class="solve_b flex_ld">
            <div class="solve_box">
                <div class="solve_mask">
                    <div class="solve_content">
                        <div class="solve_mask-icon">  <img src="static/index/qustion-icon1.png" alt=""></div>
                        <div class="mask_txt f28">监管力量滞后</div>
                        <div class="solve_mask-desc">
                            餐饮行业呈现多、小、散的特点，监管人员编制少，监管工作日益繁，监管质态难以有效提升
                        </div>
                    </div>

                </div>
                <img class="bg" src="static/index/t2.png" alt="">
            </div>
            <div class="solve_box">
                <div class="solve_mask">
                    <div class="solve_content">
                        <div class="solve_mask-icon">  <img src="static/index/qustion-icon2.png" alt=""></div>
                        <div class="mask_txt f28">食品安全意识低</div>
                        <div class="solve_mask-desc">
                            民众食品安全意识薄弱，偏重于菜品价格和口味，对后厨环境卫生、有证无证、等方面的关注仍然欠缺
                        </div>
                    </div>
                </div>
                <img class="bg" src="static/index/t1.png" alt="">
            </div>
            <div class="solve_box">
                <div class="solve_mask">
                    <div class="solve_content">
                        <div class="solve_mask-icon">  <img src="static/index/qustion-icon3.png" alt=""></div>
                        <div class="mask_txt f28">监管手段不足</div>
                        <div class="solve_mask-desc">
                            餐饮行业监管以人工监管，线下抽查为主，监管效率低，常用专项整治代替日常监管
                        </div>
                    </div>
                </div>
                <img class="bg" src="static/index/t3.png" alt="">
            </div>
            <div class="solve_box">
                <div class="solve_mask">
                    <div class="solve_content">
                        <div class="solve_mask-icon">  <img src="static/index/qustion-icon4.png" alt=""></div>
                        <div class="mask_txt f28">消费维权效率低</div>
                        <div class="solve_mask-desc">
                            消费者在维权过程中花费时间长、效率低，导致很多消费者维权意愿不高
                        </div>
                    </div>
                </div>
                <img class="bg" src="static/index/t4.png" alt="">
            </div>
        </div>
    </div>

    <div class="handle">
        <div class="solve_t flex_ZC">
            <span class="f36 fw">我们能做什么</span>
            <span class="solve_txt">多端联动助力构建城市餐饮监管系统</span>
        </div>

        <div class="handle_b">
            <div class="handle_b_box container-md">
                <div class="handle_terminal ">
                    <div class="handle_terminal_t flex_Z">
                        <img src="./static/index/i_shd.png" alt="">
                        <span class="f28">商户端</span>
                    </div>
                    <div class="handle_terminal_b flex_Z">
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">商户数据统计</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">账单管理</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">扫码点餐</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">评价管理</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">工作台</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">店铺管理</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">巡检记录</span>
                        </div>
                    </div>
                </div>
                <div class="handle_terminal">
                    <div class="handle_terminal_t flex_Z">
                        <img src="./static/index/i_yhd.png" alt="">
                        <span class="f28">用户端</span>
                    </div>
                    <div class="handle_terminal_b flex_Z">
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">扫码支付</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">店铺点评</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">扫码点餐</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">监管信息查询</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">明厨亮灶视频</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">问卷调查</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">餐饮知识学习</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">问卷调查</span>
                        </div>

                    </div>
                </div>

                <div class="handle_terminal">
                    <div class="handle_terminal_t flex_Z">
                        <img src="./static/index/i_jgd.png" alt="">
                        <span class="f28">机构端</span>
                    </div>
                    <div class="handle_terminal_b flex_Z">
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">平台监管</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">商户信息</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">商户信息巡检管理</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">用户管理</span>
                        </div>
                        <div class="dates flex_dq">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f16">账单管理</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="backgrounds"></div>
        </div>
    </div>

    <div class="polymerization flex_Z">
        <div class="mt_tops flex_ZC">
            <span class="f36 fw">我们是如何做的</span>
            <span class="solve_txt">同时为监管部门、商户和用户提供一站式服务</span>
        </div>
        <div class="polymerization_img"></div>
        <div class="polymerization_b  container-md d-flex justify-content-between align-items-center">
            <div class="polymerization_l">
                <img src="static/index/bg3.png" alt="">
            </div>
            <div class="polymerization_r">
                <div class="introduce_t flex_Z">
                    <span class="f28 fw-500">三码合一</span>
                    <span class="f16 c3">点餐码、支付码、食安码三合一，提升商户、百姓使用粘性</span>
                </div>
                <div class="introduce_b flex_Z">
                    <div class="introduce_b_box flex_Z">
                        <div class=" content">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f18 fw-500">实行红包激励资金反补</span>
                        </div>
                        <div class="content_b">
                            <span class="f14">消费者扫描安心码并完成评价，即可获得红包、优惠券激励；餐馆使用 “餐饮安心码”受理一定量的交易笔数，即可获得相应资金反补奖励。</span>
                        </div>
                    </div>
                    <div class="introduce_b_box flex_Z">
                        <div class=" content">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f18 fw-500">给予费率降减优惠</span>
                        </div>
                        <div class="content_b">
                            <span class="f14">餐馆使用安心码收款可享有一定程度支付渠道费用的折扣（视不同银行、支付机构政策而定）。</span>
                        </div>
                    </div>
                    <div class="introduce_b_box flex_Z">
                        <div class=" content">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f18 fw-500">正向激励</span>
                        </div>
                        <div class="content_b">
                            <span class="f14">对诚信经营、信用评价较好的单位进行正向激励，促进社会共治、良好生态的形成。
                            </span>
                        </div>
                    </div>
                    <div class="introduce_b_box flex_Z">
                        <div class=" content">
                            <img src="./static/index/radio.png" alt="">
                            <span class="f18">扶持智慧经营管理</span>
                        </div>
                        <div class="content_b">
                            <span class="f14">对有需求的餐馆赠送点餐系统。</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="select flex_Z">
        <div class="mt_tops flex_ZC">
            <span class="f36 fw">为什么选择我们</span>
            <span class="solve_txt">一码通识体系整合三端数据，多元化满足市场需求</span>
        </div>
        <div class="select_me container-md d-flex justify-content-between align-items-center">
            <div class="select_box">
                <div class="select_box_t flex_ZC">
                    <img src="static/index/i_jg.png" alt="">
                    <span class="f28 fw-500">监管侧扫码</span>
                </div>
                <div class="select_box_c">
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">了解企业信息</span>
                    </div>
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">了解监管区域内的餐饮企业投诉举报情况</span>
                    </div>
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">扫码进行线下常规检查和专项餐饮安全行动</span>
                    </div>
                </div>
                <div class="select_box_b flex_c">
                    <span class="f20">全方位实时监管</span>
                </div>
            </div>
            <div class="select_box" >
                <div class="select_box_t flex_ZC">
                    <img src="static/index/i_xfz.png" alt="">
                    <span class="f28 fw-500">消费者扫码</span>
                </div>
                <div class="select_box_c">
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">了解餐饮企业信息</span>
                    </div>
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">点餐、支付、评价</span>
                    </div>
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">食材溯源 </span>
                    </div>
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">申请成为餐饮志监管志愿者 </span>
                    </div>
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">获取餐饮优惠券 </span>
                    </div>
                </div>
                <div class="select_box_b flex_c">
                    <span class="f20">保障消费者权益</span>
                </div>
            </div>
            <div class="select_box">
                <div class="select_box_t flex_ZC">
                    <img src="static/index/i_sh.png" alt="">
                    <span class="f28 fw-500">商户侧扫码</span>
                </div>
                <div class="select_box_c">
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">了解企业经营报表</span>
                    </div>
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">了解企业餐饮安全风险 </span>
                    </div>
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">餐饮知识培训</span>
                    </div>
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">营业执照更新申请等政务服务</span>
                    </div>
                    <div class="select_box_c_txt">
                        <img src="./static/index/radio.png" alt="">
                        <span class="f14">营业执照更新申请等政务服务</span>
                    </div>
                </div>
                <div class="select_box_b flex_c">
                    <span class="f20">经营信息安全知识全掌握</span>
                </div>
            </div>
        </div>
    </div>

    <div class="product">
        <div class="mt_tops flex_ZC">
            <span class="f36 fw">我们如何解决问题</span>
            <span class="solve_txt">集管理、服务、监督、培训为一体的综合性平台</span>
        </div>
        <div class="product-nav-wrap">
            <div class="product-nav-list d-flex justify-content-evenly">
                <div class="product-nav active">码上评</div>
                <div class="product-nav">码上管</div>
                <div class="product-nav">码上改</div>
                <div class="product-nav">码上帮</div>
                <div class="product-nav">码上学</div>
            </div>
        </div>
        <div id="carouselExample">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="product-content">
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>实行一店一码</div>
                        </div>
                        <div>
                            按照“一店一码”规则生成每户餐饮服务企业的专属“安心码”，作为每户餐饮服务提供者的信息化信用档案。
                        </div>
                    </div>
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>餐饮消费“实时评”</div>
                        </div>
                        <div>
                            消费者就餐前后通过扫码，可实时对餐饮服务提供者从“环境卫生、着装规范、餐具洁净、明厨亮灶、菜品优质、诚信经营”等方面进行满意度评价。
                        </div>
                    </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="product-content">
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>码上举报投诉</div>
                        </div>
                        <div>
                            消费者可在扫码后通过点击“消费举报投诉”板块进入网上举报投诉，监管部门依法及时处置。
                        </div>
                    </div>
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>扫码监督检查</div>
                        </div>
                        <div>
                            监管人员可通过扫码开展日常监督检查和专项餐饮安全行动。
                        </div>
                    </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="product-content">
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>主体自觉改</div>
                        </div>
                        <div>
                            安心码”公开了餐饮服务提供者相关信息，可辅助顾客进行消费决策，倒逼餐饮服务提供者自觉整改，提升服务水平，吸引消费者。
                        </div>
                    </div>
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>部门监督改</div>
                        </div>
                        <div>
                            监管部门根据“满意——绿色笑脸”“基本满意——黄色平脸”“不满意——红色哭脸”三种等级评定结果实施差别化管理。
                        </div>
                    </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="product-content">
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>政务服务便捷化</div>
                        </div>
                        <div>
                            为餐饮服务提供者提供经营许可证、食品安全自查、网络明厨亮灶接入、食品安全管理人员和从业人员培训等事项的线上办理服务。
                        </div>
                    </div>
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>惠企信息共享</div>
                        </div>
                        <div>
                            建立部门数据分享机制，实时向餐饮服务提供者推送行业政策、金融支持、惠企助企等信息。
                        </div>
                    </div>
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>决策科学化</div>
                        </div>
                        <div>
                            建立健全大数据辅助决策长效机制，统筹政用、企用、民用大数据，强化关联分析和挖掘应用，增强用数据说话、用数据决策、用数据管理能力。
                        </div>
                    </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="product-content">
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>餐饮知识学习</div>
                        </div>
                        <div>
                            为餐饮服务提供者提完善的餐饮安全知识学习平台，提升餐饮服务者的安全服务意识。并提供各类专业的餐饮服务培训及考试认证服务。
                        </div>
                    </div>
                    <div class="product-content-section">
                        <div class="product-content-section-title d-flex align-items-center">
                            <img width="30" src="static/index/i_change.png" alt="">
                            <div>监管志愿者学习</div>
                        </div>
                        <div>
                            面向社会开放监管志愿者学习平台。通过学习加线上考试能够申请成为社会餐饮安全监管志愿者，将社会共治的理念落到实处。
                        </div>
                    </div>
                </div>
              </div>
            </div>
        </div>
        <div class="control-btns d-flex">
            <div class="btn-arrow" onclick="handleChangeProduct('prev')" style="margin-right: 32px;">
                <div class="arrow arrow-left"></div>
            </div>
            <div class="btn-arrow" onclick="handleChangeProduct('next')">
                <div class="arrow arrow-right"></div>
            </div>
        </div>
        <div class="phone-model">
            <div class="phone-wrap">
                <img src="static/index/phone1.png" alt="">
                <img src="static/index/phone2.png" alt="">
                <img src="static/index/phone3.png" alt="">
                <img src="static/index/phone4.png" alt="">
                <img src="static/index/phone5.png" alt="">
            </div>


        </div>
    </div>
<!--
    合作方案
 -->
    <div class="cooperation-wrap">
        <div class="flex_ZC">
            <span class="f36 fw">他们选择了银链食安</span>
            <span class="solve_txt">增强人民群众的食品安全参与度、获得感，幸福感和安全感</span>
        </div>
        <div class="cooperation">

            <div class="cooperation-content">
                <div class="cooperation-name d-flex align-items-center">
                    <img src="static/index/logo.png" alt="">
                    <div>云南安心码</div>
                </div>
                <div class="cooperation-content-desc">
                    <div class="desc">
                        云南省委、省政府推进爱国卫生“7个专项行动”的决策部署，自2020年7月份以来，全省各级市场监管部门紧紧国绕“让群众餐饮消费放心、安心、舒心”目标，主动担当、积极作为，用心、用情、用力推进“净餐馆”专项行动，打造了“干净、整洁、安全，放心”的餐饮消费环境，交出了一份满意的答卷。为巩固提升“净餐馆”专项行动整治成果，完善“管长期”的机制，强化“长期管”的韧劲，云南省推出了"餐饮安心码”云平台，实现“码上评”“码上管”“码上改”“码上帮”功能闭环的餐饮安全数字化监管。
                    </div>
                    <div class="total d-flex">
                        <div style="margin-right: 50px;">
                            <div>
                            <span class="number">
                                22.8
                            </span>
                                <span class="unit">
                                万户
                            </span>
                            </div>
                            <div>
                                商户公示数
                            </div>
                        </div>
                        <div>
                            <div>
                            <span class="number">
                                351068
                            </span>
                                <span class="unit">
                                万次
                            </span>
                            </div>
                            <div>
                                累计扫码评论
                            </div>

                        </div>
                    </div>

                    <div class="control-btns d-flex justify-content-between align-items-center">
                        <div class="btn-detail">
                            查看详情
                        </div>
                        <div class="d-flex">
                            <div class="btn-arrow" style="margin-right: 32px;">
                                <div class="arrow arrow-left"></div>
                            </div>
                            <div class="btn-arrow">
                                <div class="arrow arrow-right"></div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="img-wrap">
                    <img src="static/index/bg2.png" alt="">
                </div>

            </div>

        </div>

    </div>
    <footer>
        <div class="container-md d-flex flex-column flex-md-row justify-content-between">
            <div class="footer-left d-flex flex-column flex-md-row ">
                <div class="company-info">
                    <div class="company-name footer-light d-flex align-items-center">
                        <img width="23" style="margin-right: 10px;" src="static/index/logo-2.png" alt="">
                        <span>
                            海南银链食安科技有限公司
                        </span>
                    </div>
                    <div class="item">
                        运营中心地址：上海市闵行区吴中路1819号318室
                    </div>
                    <div class="item">
                        电话：021 5902 6018
                    </div>
                    <div class="item">
                        咨询邮箱：ylsa@ylaxm.com
                    </div>
                    <div class="icon-wrap">
                        <img style="margin-right: 10px;" src="https://iph.href.lu/30x30?fg=666666&bg=cccccc" alt="">
                        <img src="https://iph.href.lu/30x30?fg=666666&bg=cccccc" alt="">
                    </div>
                </div>
                <div class="web-info-wrap d-flex justify-content-center">
                    <div class="web-info">
                        <div class="footer-light">关于我们</div>
                        <div class="item">公司咨询</div>
                        <div>加入我们</div>
                    </div>
                </div>

            </div>
            <div class="footer-right d-flex">
                <div class="qrcode-wrap" style="margin-right: 40px">
                    <img src="https://iph.href.lu/120x120?fg=666666&bg=cccccc" alt="">
                    <div> 扫一扫了解更多</div>
                </div>
                <div class="qrcode-wrap">
                    <img src="https://iph.href.lu/120x120?fg=666666&bg=cccccc" alt="">
                    <div> 扫一扫了解更多</div>
                </div>
            </div>
        </div>

        <div class="copyright-wrap">
            <div>
                © Copyrights 2020-2023 海南银链食安科技有限公司 丨 沪ICP备202399999号
            </div>
            <div>
                沪公安网备 100010001010号
            </div>
        </div>
    </footer>

    <!-- <div class="zhanwei"></div> -->
    <!-- <div class="form"></div> -->
    <!-- <div class="footer"></div> -->
    <script src="js/jquery-3.5.1.min.js"></script>
<!--    <script src="js/common.js"></script>-->
    <script src="js/rem.js"></script>
    <script src="bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
    <script>
        //切换我们如何解决问题
        const myCarouselElement = document.querySelector('#carouselExample')
        const carousel = new bootstrap.Carousel(myCarouselElement, {})

        function handleChangeProduct(params) {
            console.log(params);
            var nowActive = $('.product-nav.active');
            var nowIndex = nowActive.index();
            if(params === "prev" && nowIndex === 0) return;
            if(params === "next" && nowIndex === 4) return;
            var len = 0
            console.log(nowActive,nowIndex);
            $('.product-nav').removeClass("active");
            if(params === "prev"){
                 len = 529 * (nowIndex-1);

                carousel.prev()
                $('.product-nav').eq(nowIndex-1).addClass("active")
            }
            if(params === "next"){
                $('.product-nav').eq(nowIndex+1).addClass("active")
                len = 529 * (nowIndex+1);
                carousel.next()
            }
            console.log(len);
                $('.product .phone-model .phone-wrap ').css("transform",`translateX(-${len}px)`)
        }
    </script>
<script>

    // 点击菜单跳转页面
    $('.menu-wrap').on("click",".menu",function () {
        console.log($(this).hasClass("active"))
        var isActive = $(this).hasClass("active");
        var index = $(this).index();
        if(!isActive) {
            switch (index) {
                case 0:
                    location.href = "./index.html";
                    break;
                case 1:
                    location.href = "./html/news.html";
                    break;
                case 2:
                    location.href = "./html/about.html";
                    break;


            }
        }
    })

    // 点击更多滚动
    $('.more').on('click',function () {
        let topHeight =  $('.top').height()+40;
        console.log(topHeight)
        window.scrollTo({top:topHeight,behavior:'smooth'})
    })

    var topHeight=$(".top").height();

    /*滚动事件 */
    $(window).scroll(function() {
        console.log($(window).scrollTop(),topHeight);
        if($(window).scrollTop()>=topHeight-10){ //滚动条距离顶部大于某高度(整个页面的百分之二十)
            $("header").addClass('header-fixed') //设置菜单栏的固定属性
        }else{
            $("header").removeClass('header-fixed') //设置菜单栏的固定属性
        }
    })
</script>
</body>

</html>
